<template>
  <div class="user-page">
    <div class="title border-bottom">
      <div class="touxiang-wrapper">
        <div class="touxiang-wrapper2">
          <div class="touxiang" :style="getTouxiangStyle()"></div>
        </div>
      </div>
      <div class="my-info">
        <div class="my-info-top">
          <span>值友4744867501</span>
        </div>
        <div class="my-info-bottom">
          <span class="my-lv">LV3</span><span class="my-jb">金币: 0</span>
        </div>
      </div>
    </div>
    <div class="scgz border-bottom">
      <div class="scgz-left">
        <div class="scgz-left-item">
          <div class="text">收藏</div>
          <div class="num">9</div>
        </div>
        <div class="scgz-left-item">
          <div class="text">关注</div>
          <div class="num">3</div>
        </div>
        <div class="scgz-left-item">
          <div class="text">足迹</div>
          <div class="num">9</div>
        </div>
      </div>
      <div class="scgz-right">
        <div class="qd">签到</div>
      </div>
    </div>
    <div class="list-wrapper">
      <div class="list-item">
        <div class="list-left">
          <i class="iconfont icon-commentfill"></i><span class="text">我的消息</span>
        </div>
        <div class="list-right">
          <span class="label">0</span>
        </div>
      </div>
      <div class="list-item">
        <div class="list-left">
          <i class="iconfont icon-news_hot_fill_light"></i><span class="text">我的发布</span>
        </div>
        <div class="list-right">
          <span class="text">好价、原创等</span>
        </div>
      </div>
      <div class="list-item">
        <div class="list-left">
          <i class="iconfont icon-goodsnewfill"></i><span class="text">预告提醒</span>
        </div>
        <div class="list-right">
          <span class="text"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'user-page',
  data () {
    return {
      touxiangImgSrc: require('@/assets/touxiang.jpg')
    }
  },
  methods: {
    getTouxiangStyle () {
      console.log(this.touxiangImgSrc)
      return {
        backgroundImage: 'url(' + this.touxiangImgSrc + ')',
        backgroundPosition: '-42px -105px',
        transform: 'scale(.50)'
      }
    }
  },
  activated () {
    this.$store.commit('SET_TABS_STATE', true)
    this.$store.commit('SET_SEARCH_TITLE', false)
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.user-page
  padding: 40px 12px 12px 20px
  .title
    display: flex
    padding-bottom: 12px
    .touxiang-wrapper
      flex: 0 0 70px
      position: relative
      overflow: hidden
      width: 70px
      height: 70px
      .touxiang-wrapper2
        transform: translate3d(-35px, -35px, 0)
        .touxiang
          width: 135px
          height: 135px
          border-radius: 50%
    .my-info
      flex: 1
      display: flex
      flex-direction: column
      align-content: space-around
      .my-info-top
        flex: 1
        padding: 10px 0 0 20px
        span
          font-weight: 600
          font-size: 18px
      .my-info-bottom
        flex: 0 0 20px
        padding: 10px 0 0 20px
        color: #4B4B4B
        .my-lv
          background: #444444
          vert-align: bottom
          color: #fff
          font-size: 12px
          line-height: 12px
          padding: 2px 8px
          border-radius: 3px
        .my-jb
          padding: 2px 8px 2px 16px
          vert-align: bottom
  .scgz
    display: flex
    padding: 10px 0
    margin-bottom: 20px
    .scgz-left
      flex: 0 0 180px
      width: 180px
      display: flex
      .scgz-left-item
        flex: 1
        .text
          font-size: 16px
          line-height: 22px
          color: #444444
          text-align: center
        .num
          font-size: 14px
          line-height: 18px
          color: #888888
          text-align: center
    .scgz-right
      flex: 1
      .qd
        background: #F04848
        color: #fff
        margin-left: 20px
        text-align: center
        padding: 8px 0
        border-radius: 3px
  .list-wrapper
    .list-item
      display: flex
      margin-bottom: 10px
      .list-left
        flex: 0 0 100px
        width: 100px
        font-size: 16px
        line-height: 36px
        .text
          padding: 0 0 0 8px
          font-weight: 700
      .list-right
        flex: 1
        line-height: 36px
        text-align: right
        .text
          font-size: 12px
          color: gray
        .label
          display: inline-block
          width: 16px
          height: 16px
          line-height: 16px
          text-align: center
          background: #F04848
          color: #fff
          border-radius: 50%
          font-size: 12px
          vertical-align: middle
</style>
